<template>
  <a-modal
    title="新增接口"
    :visible="visible"
    @ok="
      () => {
        $emit('create');
      }
    "
    :confirmLoading="confirmLoading"
    @cancel="
      () => {
        $emit('cancel');
      }
    "
  >
    <a-form layout="vertical" :form="form">
      <a-form-item label="接口分类">
        <a-select v-decorator="['groupId', { initialValue: '' }]">
          <a-select-option value>默认分类</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="接口名称">
        <a-input
          v-decorator="[
            'interfaceName',
            {
              rules: [{ required: true, message: '请输入接口名称' }]
            }
          ]"
        />
      </a-form-item>
      <div class="clearfix">
        <div class="float-left w-30">
          <a-form-item label="接口方法">
            <a-select
              v-decorator="['method', { initialValue: 'GET' }]"
              class="m-0"
              style="width: 100px;"
            >
              <a-select-option value="GET">GET</a-select-option>
              <a-select-option value="POST">POST</a-select-option>
              <a-select-option value="PUT">PUT</a-select-option>
              <a-select-option value="DELETE">DELETE</a-select-option>
            </a-select>
          </a-form-item>
        </div>
        <div class="float-right w-70">
          <a-form-item label="接口前缀">
            <a-select
              v-decorator="['prefix', { initialValue: '' }]"
              class="m-0"
              style="width: 300px"
            >
              <a-select-option value>无前缀</a-select-option>
              <a-select-option value="/ylh-cloud-service-user-dev"
                >ylh-cloud-service-user-dev</a-select-option
              >
              <a-select-option value="/ylh-cloud-service-order-dev"
                >ylh-cloud-service-order-dev</a-select-option
              >
              <a-select-option value="/ylh-cloud-service-fund-dev"
                >ylh-cloud-service-fund-dev</a-select-option
              >
              <a-select-option value="/ylh-cloud-service-price-dev"
                >ylh-cloud-service-price-dev</a-select-option
              >
            </a-select>
          </a-form-item>
        </div>
      </div>

      <a-form-item label="接口路径">
        <a-input
          v-decorator="[
            'path',
            { rules: [{ required: true, message: '请输入接口路径' }] }
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" src="./add-interface.ts"></script>

<style lang="scss">
@import './add-interface.scss';
</style>
